<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="产品走廊" backgroundColor="#fff" color="#000" statusBar="true"
				@clickLeft="back()" left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="subsection">
			<scroll-view class="select-top-bar" :scroll-x="true">
				<view v-for="(item, index) in selectViewList" :key="index"
					@click="selectViewFn(item, index)" class="select-top-bar-item" :class="{ 'selected': selected == index }">
					<view class="top-bar-item-title">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="contain-view">
			<scroll-view class="select-facility-view" scroll-y="true" :scroll-top="scrollTop" @scroll="onScroll" :style="{height:setcollapseheight() + 'px'}"
				@scrolltolower="handleScrolltolowerone()">
				<view v-if="dataList.length != 0" class="proGroup">
					<view class="pro-card" v-for="item,index in dataList" :key="item.id" @click="toPro(item.productId)">
						<view class="num">
							{{ index+1 }}
						</view>
						<view class="left-card">
							<img :src="item.imgList[0] && item.imgList[0].productImgUrl" alt="">
							<view v-if="item.specDesc" class="black-box">
								{{item.specDesc}}
							</view>
						</view>
						<view class="right-card">
							<view class="title">{{ item.productName }}</view>
							<view class="content">{{ item.description }}</view>
						</view>
					</view>
				</view>
				
				<view v-if="dataList.length == 0" class="facility-view-nodata">
					<image class="facility-view-blankimg" mode="widthFix" src="@/static/blank.png"></image>
					<view class="facility-view-nodata-line">
						暂无数据
					</view>
				</view>
			</scroll-view>
		</view>
		<bottomBar></bottomBar>
	</view>
</template>

<script>
	import bottomBar from "@/subPage1/components/socialized-bottomtabar/breed-bottomtabar"

	import productApi from '@/api/socialized-servce/breed-aquatics/product-corridor/index.js'
	export default {
		components: {
			bottomBar
		},
		data() {
			return {
				selected: 0,
				scrollTop: 0,
				oldScrollTop: 0,
				// 可选择跳转页面数据
				selectViewList: [],
				dataList: [],
				proPage: {
					page: 1,
					size: 5,
					total: 0,
				},
			}
		},
		onPullDownRefresh() {
			this.updataContent()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad(e) {
			this.loadArticleType()
		},
		onShow() {
			
		},
		methods: {
			selectViewFn(row, i) {
				this.selected = i
				this.proPage.page = 1
				this.productTypeId = row.productTypeId
				this.loadDataList()
			},
			toPro(id) {
				let url = '/subPage1/socialized-service/breed-aquatics/product-corridor/product-detail/index'
				this.$togo(url, { id })
			},
			onScroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			// 获取产品分类
			loadArticleType() {
				productApi.queryByConditionProductType({productTypeName: ''}).then(res => {
					this.selectViewList = res.data.map(el => {
						return { name: el.productTypeName, productTypeId: el.productTypeId }
					})
					this.productTypeId = this.selectViewList[0].productTypeId
					this.loadDataList()
				})
			},
			// 获取产品列表
			loadDataList () {
				productApi.queryPageByConditionProduct({
					...this.proPage,
					condition: {
						typeId: this.productTypeId
					}
				}).then(res => {
				
					let list = res.data.content
					this.proPage.total = res.data.totalElements
					if (this.proPage.page == 1) {
						this.dataList = list
						this.scrollTop = this.oldScrollTop
						this.$nextTick(() =>{
							this.scrollTop = 0
						})
					} else {
						this.dataList.push(...list)
					}
				})
			},
			// 上拉加载更多
			handleScrolltolowerone() {
				let len = this.proPage.page * this.proPage.size
				if (len >= this.proPage.total) return
				this.proPage.page += 1
				this.loadDataList()
			},
			updataContent() {
				this.proPage.page = 1
				this.loadDataList()
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(230)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
				  success: function(res) {
					winHeight = res.windowHeight
				  }
				});
				let oldHeight = uni.upx2px(50)
				winHeight = parseInt(winHeight) - newheight - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				uni.navigateBack({ delta: 1 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}
		
		.subsection {
			padding: 0 32rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #d3e6f9;
			
			.select-top-bar {
				width: 100%;
				justify-content: space-around;
				white-space: nowrap;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
			
				.select-top-bar-item {
					display: inline-block;
					margin-right: 20rpx;
					padding-bottom: 12rpx;
					min-width: 162rpx;
					height: 60rpx;
					font-size: 30rpx;
					
					&.selected {
						border-bottom: 4rpx solid #0e7ae9;
					}
					
					&:last-child {
						margin-right: 0;
					}
			
					.top-bar-item-title {
					  min-width: 162rpx;
					  padding: 0 10rpx;
					  height: 60rpx;
					  line-height: 60rpx;
					  text-align: center;
					  box-sizing: border-box;
					}
				}
			}
		}

		.contain-view {
			margin: 0 30rpx;
			position: relative;
			
			.proGroup {
				.pro-card {
					position: relative;
					display: flex;
					background-color: #fff;
					border-radius: 16rpx;
					padding: 40rpx 20rpx;
					overflow: hidden;
					height: 186px;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					.num {
						position: absolute;
						top: 0;
						left: 0;
						width: 36rpx;
						line-height: 36rpx;
						background-color: #047ffc;
						display: flex;
						flex-direction: row;
						justify-content: center;
						color: #fff;
						border-bottom-right-radius: 16rpx;
					}
					.left-card {
						flex: 1;
						width: 50%;
						margin-right: 20rpx;
						border-radius: 16rpx;
						overflow: hidden;
						position: relative;
						img {
							width: 100%;
							height: 144px;
						}
						.black-box {
							position: absolute;
							bottom: 6rpx;
							left: 50%;
							// z-index: 10;
							width: 130rpx;
							text-align: center;
							line-height: 26rpx;
							overflow: hidden;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							height: 26rpx;
							border-radius: 10rpx;
							background-color: #c1c1c1;
							color: #333;
							font-size: 12rpx;
							padding: 0rpx 5rpx;
							transform: translateX(-50%);
						}
					}
					.right-card {
						flex: 1;
						width: 50%;
						.title {
							text-align: center;
							font-size: 32rpx;
							font-weight: bold;
						}
						.content {
							margin-top: 10rpx;
							text-indent: 2em;
							color: #707273;
							height: 120px;
							overflow: hidden;
							display: -webkit-box;
							text-overflow: ellipsis;
							-webkit-line-clamp: 5;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
		}
	}
	
</style>
